<!-- 更改舍号页面 -->
<template>
	<view>
	    <view class="login-content">
			<view class="houseId row-center" >
				{{this.changeNfcId ? '当前读取的卡号:' +this.changeNfcId: '请靠近NFC卡片读取卡号'}}
			</view>
			<!-- <span v-if="nfcId">{{nfcId}}</span> -->
	    	
			<view class="" style="display: flex;flex-direction: column;width: 90%;margin: auto;">
				
				<view class="uni-nav-bar" style="margin:40rpx 0">
					请输入需要更换的鸽舍号(位置)
				</view>
				
				<view class="" style="display:flex;justify-content:center;align-items: center;">
					
					<input class="houseinput" type="number" maxlength="2" v-model="siteId" @input="clearInput" />
					<span>
						仓
					</span>
					<input class="houseinput" type="number" maxlength="3" v-model="row" @input="clearInput" />
					<span>排</span>
					<input class="houseinput" type="number" maxlength="3" v-model="house" @input="clearInput" />
					<span>舍</span>
					
				</view>
				
				
			</view>
			
	    	<!-- <view class="add-btn" @click="add()">更改</view> -->
			<button class="add-btn" @click="houseChange">更改</button>
			
	    	<!-- 顶部提示 -->
	    	<u-toast ref="uToast" />
	    </view>
		
	   
	</view>	
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import {reqHouseChange} from '@/api/index.js'
	import {reverseFormat} from '@/utils/format_HouseId.js'
	import colorGradient from '../../components/uview-ui/libs/function/colorGradient'
	
	export default {
		data() {
			return {
				siteId:'', //仓号
				row:'', //排号
				house:'', //舍号
				
				successMessage: '',
				showClearIcon: false, //是否显示清除按钮
				chooseSiteId: 1,
			}
		},
		computed: {
			...mapGetters(['show_nfcId', 'changeNfcId','nfcId',])
		},
		
		mounted() {
			// console.log(this.changeNfcId);
		},
		
		watch:{
			 
		},
		methods: {
			
			// 判断是否显示清除按钮
			clearInput: function(event) {
				this.newWarehouseNumber = event.detail.value;
				if (event.detail.value.length > 0) {
					this.showClearIcon = true;
				} else {
					this.showClearIcon = false;
				}
			},
			
			
			//houseChange 更改舍号
			houseChange(){
				
				//规则
				let that = this
				if (!that.siteId) {
					uni.showToast({
						title: '请输入仓号',
						icon: 'none',
					})
					return false
				}else if(!that.row){
					uni.showToast({
						title: '请输入排号',
						icon: 'none',
					})
					return false
				}else if(!that.house){
					uni.showToast({
						title: '请输入舍号',
						icon: 'none',
					})
					return false
				}
				
				//将仓排舍转化为houseid 
				const {siteId , houseId} = reverseFormat(parseInt(this.siteId),parseInt(this.row),parseInt(this.house))
				const params = {
				        siteId: siteId,
				        houseId: houseId,
				        nfcId: this.changeNfcId
				    };
				console.log(params);
				
				this.$loading()
				//发送请求
				reqHouseChange(params).then((res)=>{
					this.$hide()
					
					console.log(res);
					this.$refs.uToast.show({
						title: res.msg,
						type: 'success',
						duration:'1200',
						position: 'top'
					})
					//成功就将舍号置空 考虑到会连续换同一排位置
					this.house = '';
				}).catch((res)=>{
					this.$hide()
					this.$refs.uToast.show({
						title: res.response.data.error,
						type: 'error',
						duration:'1200',
						position: 'top'
					})
				})
			},
			
			
		}
	}
</script>

<style lang="scss" scoped>
	
	.login-content uni-input[data-v-2117ab26]{
		padding: 0 !important;
		height: 64rpx;
	}
	
	
	   .houseId {
		width: 100%;
		margin: 10rpx auto;
		padding: 18.12rpx 18.12rpx;
		font-size: 39.86rpx;
		border-radius: 14.49rpx;
		color: #fff;
		background-color: #7d9ad2;
	}
	
	.login-content {
			width: 100%;
			height: 80vh;
			text-align: center;
			color: #333333;
		}

		.add-title {
			padding-top: 15rpx;
			font-size: 52rpx;
			font-weight: bold;
			margin-bottom: 62rpx;
		}

		.login-content input {
			height: 100rpx;
			background: #F8F8F8;
			border-radius: 50rpx;
			text-align: center;
			padding: 30rpx;
			box-sizing: border-box;
			font-size: 30rpx;
		}

		.iphone,
		
		.password,
		
		.test {
			position: relative;
			margin-bottom: 60rpx;
		}

		.iphone .uni-icons,
		.password .uni-icons {
			position: absolute;
			top: 36rpx;
			right: 60rpx;
		}

		.test-btn,
		.password-btn {
			color: #ff8b33;
			font-size: 30rpx;
			text-align: right;
		}

		.get-test {
			color: #ff8b33;
			font-size: 30rpx;
			width: 244rpx;
			height: 100rpx;
			border: 1px solid #FF8B33;
			border-radius: 50rpx;
			line-height: 100rpx;
		}

		.test {
			display: flex;
			justify-content: space-between;
		}

		.add-btn {
			margin-top: 7vh;
			position: relative;
			left: 50%;
			transform: translate(-50%);
			width: 50vw;
			height: 90rpx;
			background: #FF8B33;
			border-radius: 72rpx;
			color: #fff;
			font-size: 40rpx;
			text-align: center;
			line-height: 90rpx;
		}
</style>
